<template>
    <div>
        <!--排课-->
        <div class="tabs-container">
            <!--<div class="tabs">-->
            <!--<img v-if="week==0" src="../assets/left.png" alt="">-->
            <!--<img v-else src="../assets/left-active.png" alt="" @click="changeWeek(0)">-->
            <!--<div v-for="(item,index) in dateList"-->
            <!--:key="item" class="table-item"-->
            <!--:class="{active:day==item}"-->
            <!--@click="active(item)">-->
            <!--<span>{{item}}</span>-->
            <!--<span>{{week==0?'本':'下'}}周{{weekList[index]}}</span>-->
            <!--</div>-->
            <!--<img v-if="week==1" src="../assets/right.png" alt="">-->
            <!--<img v-else src="../assets/right-active.png" alt="" @click="changeWeek(1)">-->
            <!--</div>-->

        </div>
        <div class="options">
            <div>
                <span>排课日期 </span>
                <DatePicker type="date"
                            placeholder="日期选择"
                            style="width: 200px"
                            :value="day"
                            :options="dayOptions"
                            @on-change="dayChange"
                />
            </div>
            <div class="add">
                <Button class="title-option" type="error" @click="quickSetting">
                    <!--同{{week==0?'上':'本'}}周{{proWeek}}-->
                    快速排课
                </Button>
                <Button class="title-option" type="success" @click="add">添加排课</Button>
                <Button class="title-option" type="primary" @click="exportData">
                    <Icon type="ios-download-outline"></Icon>
                    下载课表
                </Button>
            </div>
        </div>
        <Table :columns="columns" :data="data" border stripe tooltip-theme="light" ref="table">
            <template slot-scope="{row}" slot="action">
                <Button type="primary" size="small" style="margin-right: 5px" @click="edit(row)">编辑</Button>
            </template>
        </Table>
        <calender-add-form :modal="addModal" :modify="modify"/>
        <calender-edit :modal="editModal" :modify="editModify"></calender-edit>
        <!--快速设置-->
        <Modal
                v-model="quickModal"
                title="快速排课"
                :closable="false"
                :mask-closable="false"
                width="680px">
            <Form
                    ref="formValidate"
                    :model="formItem"
                    :label-width="80">
                <FormItem label="排课时间" prop="day">
                    <span>{{day}}</span>
                </FormItem>
                <FormItem label="相同日期" prop="preDay">
                    <DatePicker type="date"
                                :value="formItem.preDay"
                                placeholder="选择相同日期"
                                @on-change="handleChange">
                    </DatePicker>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" size="large" @click="quickCancel">取消</Button>
                <Button type="primary" size="large" @click="submit('formValidate')" v-no-more-click>确定</Button>
            </div>
        </Modal>

    </div>
</template>

<script>
    import CalenderAddForm from './CalendarAddForm'
    import CalenderEdit from './CalenderEdit'
    import {today} from "../request/utils"

    export default {
        name: 'Calendar',
        components: {
            CalenderAddForm,
            CalenderEdit //编辑
        },
        data() {
            return {
                dayOptions: {
                    shortcuts: [
                        {
                            text: '今天',
                            value() {
                                return new Date();
                            },
                        },
                        {
                            text: '昨天',
                            value() {
                                const date = new Date();
                                date.setTime(date.getTime() - 3600 * 1000 * 24);
                                return date;
                            },
                        },
                        {
                            text: '上个礼拜',
                            value() {
                                const date = new Date();
                                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                                return date;
                            },
                        }
                    ]
                },
                quickModal: false,
                addModal: false,
                editModal: false,
                formItem: {
                    preDay: ''
                },
                modify: '',
                editModify: '',
                day: today,
                columns: [],
                data: [],
            }
        }
        ,
        created() {
            this.getTable();
        },
        watch: {
            day(value) {
                this.day = value;
                console.log("day", this.day)
                this.getTable();
            }
        }
        ,
        methods: {
            active(item) {
                this.day = item;
                this.getTable();
            },
            dayChange(date) {
                this.day = date;
            },
            //获取table数据
            getTable() {
                let weekDay = ["日", "一", "二", "三", "四", "五", "六"];
                let myDate = new Date(Date.parse(this.day));
                this.proWeek = weekDay[myDate.getDay()];
                this.columns = [];
                this.$api.teachingGetByDay(this.day).then(res => {
                    if (null == res.columns || res.columns.length == 0) {
                        this.columns = [];
                        this.data = []
                    } else {
                        //封装新列表头,深拷贝
                        this.columns = [
                            {
                                title: '老师',
                                key: 'teacherName',
                                minWidth: 80,
                                align: 'center',
                                tooltip: true,
                                fixed: 'left'
                            }, {
                                title: '课程',
                                key: 'course',
                                minWidth: 80,
                                align: 'center',
                                tooltip: true,
                                fixed: 'left'
                            }, {
                                title: '时间',
                                align: 'center',
                                minWidth: 80,
                                fixed: 'left',
                                key: 'time',
                                render: (h) => {
                                    return h('div', {
                                            attrs: {
                                                class: 'subCol'
                                            }
                                        }, [
                                            h('ul', ["教室", "班级类型", "年级", "学生"].map(item => {
                                                    return h('li', {}, item)
                                                })
                                            )
                                        ]
                                    )
                                }
                            }
                        ];
                        res.columns.forEach(e => {
                            let title = e.slice(0, 2) + ":" + e.slice(2, 4) + "-" + e.slice(4, 6) + ":" + e.slice(6);
                            let column = {
                                title: title,
                                key: e,
                                align: 'center',
                                tooltip: true,
                                minWidth: 250,
                                ellipsis: true,
                                render: (h, params) => {
                                    return h('div', {
                                            attrs: {
                                                class: 'subCol'
                                            }
                                        }, [
                                            h('ul', this.data[params.index][e].map(item => {
                                                    return h('li', {}, item.value)
                                                })
                                            )
                                        ]
                                    )
                                }
                            }
                            this.columns.push(column);
                        })
                        let optionColumn = {
                            title: '操作',
                            slot: 'action',
                            width: 80,
                            fixed: 'right',
                            align: 'center',
                        }
                        this.columns.push(optionColumn);
                        //封装表单内容
                        this.data = res.tableData;
                    }
                })
                //获取周次

            },
            add() {
                this.addModal = true;
                let modify = {
                    day: this.day
                }
                this.modify = modify;
            },
            edit(row) {
                this.editModify = {
                    day: this.day,
                    teacherId: row.teacherId,
                    teacherName: row.teacherName
                }
                this.editModal = true
            },
            handleChange(date) {
                this.formItem.preDay = date;
            },
            //快速设置提交
            submit() {
                if (this.formItem.preDay == null ||
                    this.formItem.preDay == '') {
                    this.$Message.error('相同日期不能为空');
                } else {
                    console.log("test")
                    this.$api.teachingSetSamePre({
                        day: this.day,
                        preDay: this.formItem.preDay
                    }).then(() => {
                        this.quickCancel()
                        this.$Message.success('保存成功');
                        this.getTable();
                    })
                }
            },
            //导出数据
            exportData() {
                this.$refs.table.exportCsv({
                    filename: this.day + "课表",
                    columns: this.columns,
                    data: this.data.map(v => ({...v, time: v.time})),
                });
            },
            quickSetting() {
                this.quickModal = true;
            },
            quickCancel() {
                this.quickModal = false
            },
            cancel() {
                this.addModal = false
                this.editModal = false
            },
        }
    }
</script>

<style lang="less">
    /*.tabs-container {*/
    /*width: 100%;*/
    /*border-bottom: 1px solid #CCCCCC;*/
    /*}*/

    .tabs {
        display: flex;
        width: 90%;
        justify-content: space-between;
        align-items: center;
        height: 50px;
    }

    .table-item {
        display: flex;
        align-items: center;
        height: 50px;
        flex-direction: column;
    }

    .active {
        border-bottom: 2px solid #3366CC;
        color: #3366CC;
    }

    .table-item:hover {
        color: #3366CC;
        cursor: pointer;
    }

    .tabs {
        img {
            width: 18px;
            height: 18px;
        }

        img:hover {
            cursor: pointer;
        }
    }

    .options {
        display: flex;
        /*flex-direction: row-reverse;*/
        height: 60px;
        align-items: center;
        justify-content: space-between;
    }

    .subCol {
        text-align: center;
    }

    .subCol > ul > li {
        margin: 0 -18px;
        list-style: none;
        text-align: center;
        padding: 9px;
        border-bottom: 1px solid #ccc;
        overflow-x: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .title-option {
        margin-left: 10px;
    }

    .subCol > ul > li:last-child {
        border-bottom: none
    }

    .subCol > ul > li {
        list-style: arabic-indic;
    }


</style>
